<template>
	<view>
		<!-- 自定义弹窗 -->
		<u-popup v-model="pupshow" mode="bottom" border-radius="15" @close="headerClose" :safe-area-inset-bottom="true"
			:z-index="zindex">
			<view class="cumpupOuter" :style="OuterStyle">

				<view class="cumpuphead">
					<view class="title">
						{{ptitle}}
					</view>
					<view class="text" v-if="ptext">
						{{ptext}}
					</view>
					<view class="closebtn" v-if="isclose" @click="headerClose">
						<u-icon name="close" color="#000" size="30"></u-icon>
					</view>
				</view>

				<view class="pupContent" :style="pcontstyle">
					<!-- 自定义模式 -->
					<template v-if="iscustom">
						<slot name="content"></slot>
					</template>
					<!-- 单选选择 -->
					<template v-else>
						<picker-view :value="pickerValue" @change="TimePerChange" :indicator-style="indicatorStyle"
							class="pupPickeriew">
							<picker-view-column>
								<view class="tperiod FlexRow" v-for="(val, index) in pradiolist" :key="index">
									{{val.title || val.label}}
								</view>
							</picker-view-column>
						</picker-view>
					</template>
				</view>

				<view class="defconfirm_btn FlexRow" :class="'ThemeBack' + ThemeType"
					@click="$u.throttle(pupConfirm, 1500)">
					{{confirmtxt}}
				</view>


			</view>
		</u-popup>

	</view>
</template>

<script>
	export default {
		props: {
			zindex: {
				type: [Number, String],
				default: 200,
			},
			pcontstyle: {
				type: String,
				default: '',
			},
			// 标题
			ptitle: {
				type: String,
				default: '弹窗',
			},
			// 描述
			ptext: {
				type: String,
				default: '',
			},
			// 确定按钮文字
			confirmtxt: {
				type: String,
				default: '确定',
			},
			// 关闭按钮是否显示
			isclose: {
				type: Boolean,
				default: true,
			},
			// 是否为自定义模式
			iscustom: {
				type: Boolean,
				default: false,
			},

			OuterStyle: {
				type: String,
				default: '',
			},
			// 选择模式列表
			pradiolist: {
				type: Array,
				default: () => {
					return []
				},
			},
			// 按钮颜色 1.蓝色  2.红色  3.橙色
			ThemeType: {
				type: [Number, String],
				default: 1,
			},
		},
		data() {
			return {
				pickerValue: [0],
				pupshow: false, // 弹窗显示
				indicatorStyle: `
					border-radius: 12rpx;
					background: rgba(145, 145, 145, 0.1);
				`,
			}
		},

		methods: {

			TimePerChange(e) {
				let {
					value
				} = e.detail
				this.pickerValue = value
			},
			// 关闭弹窗
			headerClose() {
				this.pupshow = false
				this.$emit('close')
			},
			// 确认点击
			pupConfirm() {
				this.headerClose()
				let index = this.pickerValue[0]
				let resdata = this.iscustom ? '' : this.pradiolist[index]
				this.$emit('saveclick', resdata)
			},

		},
	}
</script>

<style lang="scss" scoped>
	@import "@/bundle4/css/Flex.scss";



	.cumpupOuter {
		width: 100%;
		padding: 40rpx;
	}

	.cumpuphead {
		width: 100%;
		position: relative;

		.title {
			margin-bottom: 18rpx;
			font-size: 40rpx;
			font-weight: 700;
			color: rgba(38, 38, 38, 1);
			text-align: left;
			vertical-align: top;

		}

		.text {
			font-size: 28rpx;
			font-weight: 400;
			color: rgba(117, 117, 117, 1);
			text-align: left;
			vertical-align: top;

		}

		.closebtn {
			position: absolute;
			right: 0;
			top: 0;
			padding: 20rpx;

			i {
				color: #000;
				font-size: 42rpx;
				font-weight: bold;
			}
		}
	}

	.pupContent {
		width: 100%;
		margin: 50rpx 0;

		.pupPickeriew {
			width: 100%;
			height: 300rpx;
		}

		.tperiod {
			width: 100%;
			// height: 68rpx;
			padding: 0 68rpx 0 32rpx;
			border-radius: 12rpx;
			font-size: 32rpx;
			font-weight: 550;
			color: #000;

			.tper_txt {
				font-size: 32rpx;
				font-weight: 550;
				color: #000;
			}

		}
	}
</style>